<template>
  <div id="app">
     <div>{{counter}}</div>
     <button @click="add(1)">加</button>
     <button @click="add(-1)">减</button>
     <button @click="addAsync(1)">异步加</button>
     <div>{{counter|counterFil}}</div>
  </div>
</template>

<script>


export default {
  filters:{
    counterFil:function(value){
      let res=value%2===0?"偶数":"奇数"
      return res;
    }
  },
  data(){
    return{
      counter:666
    }
  }, 
  name: 'App',
  methods:{
    add:function(val){
      this.counter+=val
    },
    addAsync:function(val){
      let _this=this
      console.log(val);
      setTimeout(function(){
        _this.counter++
      },3000)
    }
  },
  components: {

  }
}
</script>
 
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
